<template>
    <div>
        <el-container>
            <el-header>
                <div>
                    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group>
                </div>
                <p>欢迎您，{{nicknme}}</p>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose" :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品管理</span>
                            </template>

                            <el-menu-item @click="$router.push({path:'/Product/Selstock'})" index="Selstock">查看商品
                            </el-menu-item>
                            <el-menu-item @click="$router.push({path:'/Product/Selstocked'})" index="Selstock">查看商品库存
                            </el-menu-item>
                            <el-menu-item @click="$router.push({path:'/Product/Joincom'})" index="Selstock">商品入库
                            </el-menu-item>
                            <el-menu-item @click="$router.push({path:'/Product/Addcom'})" index="Selstock">添加商品
                            </el-menu-item>
                            <el-menu-item @click="$router.push({path:'/Product/Secomdcom'})" index="Selstock">查看秒杀商品
                            </el-menu-item>
                            <el-menu-item @click="$router.push({path:'/Product/Selallcom'})" index="Selstock">添加秒杀商品
                            </el-menu-item>
                            <el-menu-item index="1-3">选项3</el-menu-item>

                            <!--<el-submenu index="1-4">-->
                            <!--<span slot="title">选项4</span>-->
                            <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
                            <!--</el-submenu>-->
                        </el-submenu>
                        <!--<el-menu-item index="2">-->
                        <!--<i class="el-icon-menu"></i>-->
                        <!--<span slot="title">导航二</span>-->
                        <!--</el-menu-item>-->
                    </el-menu>

                </el-aside>
                <el-container>
                    <el-main>
                        <transition name="move" mode="out-in">
                            <keep-alive>
                                <router-view></router-view>
                            </keep-alive>
                        </transition>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    export default {
        name: "Home",
        nicknme: "2233",
        data() {
            return {
                realname: '',
                isCollapse: false
            }
        }, beforeRouteEnter(to, from, next) {
            next(vm => {
                //在此处vm表示vue组件对象
                vm.loadDataU();
            });

        }, methods: {
            loadDataU: {},
            handleOpen(key, keyPath) {
                window.console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                window.console.log(key, keyPath);
            }

        }
    }
</script>

<style scoped>
    .el-header {
        color: white;
        background-color: black;
    }

    .el-aside {

    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

</style>